<template>
  <div class="content">
    <h2>视频删改</h2>
    <div class="item-bar">
      <el-input
        placeholder="请输入要搜索的内容"
        v-model="input"
        class="input-with-select"
        @keyup.enter.native="search"
      >
        <el-button
          @click="search"
          slot="append"
          icon="el-icon-search"
        ></el-button>
      </el-input>
      <el-button
        type="primary"
        @click="$router.push('/home/video-management/upload')"
        round
        >上传视频</el-button
      >
    </div>
    <el-empty :image-size="200" v-show="emptyShow"></el-empty>
    <template>
      <el-dialog
        :destroy-on-close="true"
        top="5vh"
        title="视频详情"
        :visible.sync="dialogVisible"
        width="60%"
      >
        <div class="player"></div>
        <span slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <el-table
        v-show="!emptyShow"
        :data="videoData"
        style="width: 100%"
        v-loading="!videoData?.length"
        ref="table"
      >
        <el-table-column align="center" type="index" label="序号" :width="100">
        </el-table-column>
        <el-table-column :width="230" label="视频" align="center">
          <template slot-scope="scope">
            <div class="img">
              <img :src="videoData[scope.$index]?.img" alt="" class="" />
              <div class="mask" @click="openDialog(scope.$index)">
                <i class="el-icon-video-play"></i>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="视频名称">
        </el-table-column>
        <el-table-column prop="time" align="center" label="投稿时间">
          <template slot-scope="scope">
            <div class="img">
              <el-tag type="info">{{
                getDate(videoData[scope.$index]?.time)
              }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" align="center" label="作者">
        </el-table-column>
        <el-table-column
          prop="review_status"
          label="视频状态"
          :width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="videoData[scope.$index]?.review_status == '待审核'">{{
              videoData[scope.$index]?.review_status
            }}</el-tag>
            <el-tag
              type="success"
              v-else-if="videoData[scope.$index]?.review_status == '审核已通过'"
              >{{ videoData[scope.$index]?.review_status }}</el-tag
            >
            <el-tag type="warning" v-else>{{
              videoData[scope.$index]?.review_status
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="agree(videoData[scope.$index]?.videoId)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              @click="back(videoData[scope.$index]?.videoId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="videoNum"
      :page-size="5"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1,
      dialogVisible: false,
      videoData: [],
      videoNum: null,
      emptyShow: false,
      input: "",
    };
  },
  methods: {
    search() {
      this.videoData = [];
      this.$axios
        .get(`/video_details/search?words=${this.input}&&start=0`)
        .then((res) => {
          this.videoData = res.data;
          this.videoData.forEach((e) => {
            switch (e.review_status) {
              case 0:
                e.review_status = "待审核";
                break;
              case 1:
                e.review_status = "审核已通过";
                break;
              default:
                e.review_status = "打回后重投";
            }
          });
          if (!this.videoData.length) this.emptyShow = true;
        });
    },
    openDialog(index) {
      this.dialogVisible = true;
      setTimeout(() => {
        new DogePlayer({
          container: ".player",
          userId: 6369,
          vcode: this.videoData[index]?.vcode,
          theme: "#3a6d70",
          autoPlay: true,
        });
      }, 100);
    },
    handleCurrentChange(val) {
      this.videoData = [];
      this.$axios
        .get(`/video_details/all?start=${(val - 1) * 5}&&end=5`)
        .then((res) => {
          this.videoData = res.data;
          this.videoData.forEach((e) => {
            switch (e.review_status) {
              case 0:
                e.review_status = "待审核";
                break;
              case 1:
                e.review_status = "审核已通过";
                break;
              default:
                e.review_status = "打回后重投";
            }
          });
          if (!this.videoData.length) this.emptyShow = true;
        });
    },
    agree(id) {
      this.$axios
        .patch("video_details/status", { id, status: 1 })
        .then(() => {
          this.$message.success("已通过！");
          this.$axios
            .get(
              `/video_details/all?start=${(this.currentPage - 1) * 5}&&end=5`
            )
            .then((res) => {
              this.videoData = res.data;
              this.videoData.forEach((e) => {
                switch (e.review_status) {
                  case 0:
                    e.review_status = "待审核";
                    break;
                  case 1:
                    e.review_status = "审核已通过";
                    break;
                  default:
                    e.review_status = "打回后重投";
                }
              });
              if (!this.videoData.length) this.emptyShow = true;
            });
        })
        .catch((err) => {
          this.$message.error("审核失败！");

          console.log(err);
        });
    },
    back(id) {
      this.$axios
        .patch("video_details/status", { id, status: -1 })
        .then(() => {
          this.$message.success("已打回！");
          this.$axios
            .get(
              `/video_details/all?start=${(this.currentPage - 1) * 5}&&end=5`
            )
            .then((res) => {
              this.videoData = res.data;
              this.videoData.forEach((e) => {
                switch (e.review_status) {
                  case 0:
                    e.review_status = "待审核";
                    break;
                  case 1:
                    e.review_status = "审核已通过";
                    break;
                  default:
                    e.review_status = "打回后重投";
                }
              });
              if (!this.videoData.length) this.emptyShow = true;
            });
        })
        .catch((err) => {
          this.$message.error("审核失败！");

          console.log(err);
        });
    },
    getDate(time) {
      let date = new Date(Number(time));
      let year = date.getFullYear();
      let month = date.getMonth() + 1; // 注意，月份是从0开始的，所以需要+1
      let day = date.getDate();
      let hours = date.getHours();
      let minutes = date.getMinutes();
      let seconds = date.getSeconds();

      // 为了使格式统一，如果月份、日期、小时、分钟或秒小于10，则在它们之前添加0
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hours = hours < 10 ? "0" + hours : hours;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
  mounted() {
    this.$axios
      .get(`/video_details/all?start=${(this.currentPage - 1) * 5}&&end=5`)
      .then((res) => {
        this.videoData = res.data;
        this.videoData.forEach((e) => {
          switch (e.review_status) {
            case 0:
              e.review_status = "待审核";
              break;
            case 1:
              e.review_status = "审核已通过";
              break;
            default:
              e.review_status = "打回后重投";
          }
        });
        if (!this.videoData.length) this.emptyShow = true;
      });
    this.$axios.get("/video_details/all/count").then((res) => {
      this.videoNum = res.data[0]["count(*)"];
    });
  },
};
</script>
<style scoped lang="less">
.item-bar {
  .el-input {
    width: 50%;
    padding-bottom: 20px;
    margin-right: 5%;
  }
  & > .el-button {
    width: 120px;
    font-size: medium;
  }
}
.el-table {
  min-height: 65vh;
}
.img {
  position: relative;
  img {
    border-radius: 10px;
    height: 100px;
    width: 80%;
  }
  .mask {
    border-radius: 10px;
    transition: 0.3s all;
    box-sizing: border-box;
    height: 100px;
    width: 80%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    &:hover {
      background: #22222250;
      opacity: 1;
    }
    i {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 40px;
      color: #fff;
    }
  }
}

h2 {
  padding: 20px;
  margin-top: 0;
}
</style>
